<%--
  - Author		:	Jaewon Choi
  - Date			:
  - Description	:	
  --%>
<%@ page language="java" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/pages/includes/taglibs.jspf" %>
<%@ include file="/WEB-INF/pages/includes/variables.jspf" %>
<%@ include file="/WEB-INF/pages/includes/doctype.jspf" %>
<html>
	<head>
<%@ include file="/WEB-INF/pages/includes/metatags.jspf" %>
		<title><fmt:message key="pages.title" /></title>
		<link rel="stylesheet" type="text/css" href="<c:url value="${dirStyles}/common.css" />" />
		<style type="text/css">
			.cateList {
				background: none repeat scroll 0 0 #EEEEEE;
				border-bottom: 2px solid #000000;
				height: 340px;
				list-style: none outside none;
				margin: 0;
				overflow-y: scroll;
				padding: 0;
			}
			.cateList li {
				cursor: pointer;
				height: 28px;
				margin: 3px;
				line-height: 28px;
			}
			
			.cateList li.selected {
				background: #d2d2d2;
			}
			
		</style>
		<script type="text/javascript" src="<c:url value="${dirScripts}/jquery-1.7.2.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="${dirScripts}/jquery-ui-1.8.21.custom.min.js" />"></script>
		<script type="text/javascript">
			$(function(){
				getContList($("#adCategoryIdx").val());
			});
			
			function getContList(adCategoryIdx){
				$.ajax({
					type: "GET",
					url: "<c:url value="/adCategory/dispOrderList" />/"+adCategoryIdx,
					dataType: "json",
					async: false,
					contentType: "application/json",
					success: function(data){
						if(data.resultCode == "200"){
							$(".cateList").html("");
							
							for(var x in data.inCont){
								var inCont = data.inCont[x];
								$("#inContWrap").append("<li title='"+inCont.name+"'><input type='hidden' name='dispOrder' value='"+inCont.idx+"' /><a href='#' title='"+inCont.name+"'>"+inCont.name+"</a></li>");
							}
							for(var x in data.outCont){
								var outCont = data.outCont[x];
								$("#outContWrap").append("<li title='"+outCont.name+"'><input type='hidden' name='dispOrder' value='"+outCont.idx+"' /><a href='#' title='"+outCont.name+"'>"+outCont.name+"</a></li>");
							}
							
							$( "#inContWrap, #outContWrap" ).sortable({
								connectWith: ".cateList"
								, cursor: "pointer"
								, stop : function(event, ui){
									chkCnt();
								}
							}).disableSelection();
							
							$(".cateList li").click(function(){
								$(this).toggleClass("selected");
							});
							chkCnt();
						}else{
							alert(data.errMsg);
						}
					},
					beforeSend: function(){
					},
					error: function(jqXHR, textStatus, errorThrown){
						//alert(jqXHR.responseText); //에러 페이지 내용
						alert("오류가 발생하였습니다.\n관리자에게 문의 바랍니다.");
					},
					complete: function(){
					}
				 });
			}
			
			function moveCont(direction){
				if(direction == "left"){
					$("#inContWrap li[class=selected]").clone().appendTo($("#outContWrap")).removeClass("selected").click(function(){
						$(this).toggleClass("selected");
					});
					$("#inContWrap li[class=selected]").remove();
				}else if(direction == "right"){
					$("#outContWrap li[class=selected]").clone().appendTo($("#inContWrap")).removeClass("selected").click(function(){
						$(this).toggleClass("selected");
					});
					$("#outContWrap li[class=selected]").remove();
				}
				chkCnt();
			}
			
			function chkCnt(){
				$("#lCnt").html("컨텐츠 수 ("+$("#outContWrap>li").length+")");
				$("#rCnt").html("컨텐츠 수 ("+$("#inContWrap>li").length+")");
			}
			
			function findCont(word, wrap){
				if(wrap == "l"){
					$("#outContWrap>li>a[title='"+word+"']").focus();
				}else{
					$("#inContWrap>li>a[title='"+word+"']").focus();
				}
			}
		</script>
	</head>
	<body>
		<div class="bodyWrap">
<%@ include file="/WEB-INF/pages/includes/header.jsp" %>
<%@ include file="/WEB-INF/pages/includes/left.jsp" %>
			<div class="contWrap">
				<div class="menuTitle">카테고리 편집</div>
				<div class="searchWrap">
					<ul  class="lineBlock">
						<li>
							<select id="adCategoryIdx" name="adCategoryIdx" style="width:94px;" onchange="javascript:getContList(this.value);">
								<c:forEach items="${adCategoryList}" var="adCategory">
									<option <c:if test="${adCategory.idx eq param.adCategoryIdx}">selected="selected"</c:if> value="${adCategory.idx}">${adCategory.name}</option>
								</c:forEach>
							</select>
							<input type="button" class="btn" value="등록" onclick="javascript:document.frm.adCategoryIdx.value=$('#adCategoryIdx').val();document.frm.submit();">
						</li>
					</ul>
				</div>
				<div style="clear: both; float: left; width: 100%;">
					<div style="border-top: 2px solid #000000; float: left;width: 366px;">
						<div style="border-bottom: 2px solid #000000; height: 36px; line-height: 36px;">
							카테고리 미포함 콘텐츠
						</div>
						<div style="border-bottom: 2px solid #000000; height: 36px; line-height: 36px;">
							<font style="float: left;width: 102px;">검색</font><input type="text" onkeyup="javascript:findCont(this.value, 'l');">
						</div>
						<div><ul id="outContWrap" class="cateList"></ul></div>
						<div id="lCnt" style="border-bottom: 2px solid #000000; height: 36px; line-height: 36px;"></div>
					</div>
					<div style="float: left; margin: 0 18px; padding-top: 210px; width: 40px;">
						<input type="button" style="width: 40px; height: 40px; margin-bottom:10px;" value="&gt;" onclick="javascript:moveCont('right');" />
						<input type="button" style="width: 40px; height: 40px;" value="&lt;" onclick="javascript:moveCont('left');" />
					</div>
					<div style="border-top: 2px solid #000000; float: left;width: 366px;">
						<div style="border-bottom: 2px solid #000000; height: 36px; line-height: 36px;">
							카테고리 포함 콘텐츠
						</div>
						<div style="border-bottom: 2px solid #000000; height: 36px; line-height: 36px;">
							<font style="float: left;width: 102px;">검색</font>
							<input type="text" onkeyup="javascript:findCont(this.value, 'r');">
						</div>
						<div>
							<form name="frm" method="post" action="<c:url value="/adCategory/dispOrder/submit.do" />">
								<input type=hidden name="adCategoryIdx" value="${param.adCategoryIdx}">
								<ul id="inContWrap" class="cateList"></ul>
							</form>
						</div>
						<div id="rCnt" style="border-bottom: 2px solid #000000; height: 36px; line-height: 36px;"></div>
					</div>
				</div>
			</div>
<%@ include file="/WEB-INF/pages/includes/footer.jsp" %>
		</div>
	</body>
</html> 